<template>
  <vxe-pulldown ref="xDown1">
    <template #default>
      <vxe-input v-model="value1" :placeholder="placeholder" @focus="focusEvent1" @keyup="keyupEvent1"></vxe-input>
    </template>
    <template #dropdown>
      <div class="my-dropdown1">
        <div class="list-item1" v-for="item in list1" :key="item.value" @click="selectEvent1(item)">
           <span :content="item.label ">{{ item.label+ ( item.number?(`（数量：${item.number}）`):'') }}</span>
        </div>
      </div>
    </template>
  </vxe-pulldown>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      list1: [],
    };
  },
  methods: {
    focusEvent1() {
      this.$refs.xDown1.showPanel();
    },
    keyupEvent1() {
      const { value1 } = this;
      this.list1 = value1
        ? this.data1.filter((item) => item.label.indexOf(value1) > -1)
        : this.data1;
    },
    selectEvent1(item) {
      this.value1 = item.label;
      let T=this
      this.$refs.xDown1.hidePanel().then(() => {
        this.list1 = this.data1;
        T.$parent.搜索账号列表() //触发父类的方法
      });
    },
    刷新:function(){
      // let  a = [1,2,3,3,3];
      let a = [];
      for (let index = 0; index < this.list.length; index++) {
        a.push({ label: this.list[index].label , value: index,number:this.list[index].number });
      }
      this.data1 = a;
      this.list1 = a;
    },
  },
  created: function () {
    this.刷新()
  },
  watch: {
    value1: function (val) {
      this.$emit("update:value", val);
    },
    list:function (val){
      this.刷新()
    },
    // value:function(val){
    //     this.value1 = this.value

    // }
  },

  props: ["list", "value", "placeholder"],
};
</script>

<style>
.my-dropdown1 {
  height: 170px;
  overflow: auto;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  margin-left: 10px;
}
 .list-item1:hover {
  background-color: #f5f7fa;
}


</style>